<template>
  <div class="container">
    
    <template v-if="detailStatus == false">
      <div class="imgWrapper">
      <img src="../../assets/img/gonggao.png" alt />
    </div>
    <div class="floor-two">
      <div class="img-l">
        <img src="../../assets/img/baozhu.png" alt />
      </div>

      <div class="first"  @click="toDetail(newsList[0].id)">
        <img :src="newsList[0].picture" alt />
        <div class="content">
          <div class="top">{{newsList[0].title}}</div>
          <div
            class="mid"
          > {{newsList[0].introduction}}</div>
          <div class="foot">{{newsList[0].addtime}}</div>
        </div>
      </div>

      <div class="img-r">
        <img src="../../assets/img/baozhu.png" alt />
      </div>
    </div>
    <div class="floor-three">
      <div class="card"  @click="toDetail(newsList[1].id)">
        <div class="top1">
          <span style="font-size:18px;">{{newsList[1].time1}}</span>
          <span style="font-size:14px;">{{ newsList[1].time2 }}</span>
        </div>
        <div class="foot1">
          <div class="title">{{ newsList[1].title }}</div>
          <div
            class="wb"
          >{{newsList[0].introduction}}</div>
        </div>
      </div>
      <div class="card"  @click="toDetail(newsList[2].id)">
        <div class="top1">
          <span style="font-size:18px;">{{newsList[2].time1}}</span>
          <span style="font-size:14px;">{{ newsList[2].time2 }}</span>
        </div>
        <div class="foot1">
          <div class="title">{{ newsList[2].title }}</div>
          <div
            class="wb"
          >{{newsList[2].introduction}}</div>
        </div>
      </div>
      <div class="card"  @click="toDetail(newsList[3].id)">
        <div class="top1">
          <span style="font-size:18px;">{{newsList[3].time1}}</span>
          <span style="font-size:14px;">{{ newsList[3].time2 }}</span>
        </div>
        <div class="foot1">
          <div class="title">{{ newsList[3].title }}</div>
          <div
            class="wb"
          >{{newsList[3].introduction}}</div>
        </div>
      </div>
      
    </div>
    <el-button type="primary" style=" margin-top:30px; margin-left:45%;"  @click="sendStatus(5)">查看更多>></el-button>

    <div class="floor-four">
        <div class="title1">
            <div>DATA SHOW</div>
            <div>驾照信息展示</div>
        </div>
        <div class="list">
            <div class="left">
                <img src="@/assets/img/jiazhaoxinxi_tupian1.jpg" alt="">
                <img src="@/assets/img/jiazhaoxinxi_tupian2.jpg" alt="">
            </div>
            <div class="mid1"><img src="@/assets/img/jiazhaoxinxi_tupian3.jpg" alt=""></div>
            <div class="right">
                <img src="@/assets/img/jiazhaoxinxi_tupian4.jpg" alt="">
                <img src="@/assets/img/jiazhaoxinxi_tupian5.jpg" alt="">
            </div>
        </div>
        <el-button type="primary" style="margin-top:10px;margin-left:45%;" @click="sendStatus(2)">查看更多>></el-button>
    </div>
    <div class="floor-four">
        <div class="title1">
            <div>DATA SHOW</div>
            <div>驾校车辆展示</div>
        </div>
        <div class="list">
            <div class="left">
                <img src="@/assets/img/jiaxiaocheliang_tupian1.jpg" alt="">
                <img src="@/assets/img/jiaxiaocheliang_tupian2.jpg" alt="">
                
            </div>
            <div class="mid1"> <img src="@/assets/img/jiaxiaocheliang_tupian3.jpg" alt=""></div>
            <div class="right">
                <img src="@/assets/img/jiaxiaocheliang_tupian4.jpg" alt="">
                <img src="@/assets/img/jiaxiaocheliang_tupian5.jpg" alt="">
            </div>
        </div>
        <el-button type="primary" style="margin-top:10px;margin-left:45%;" @click="sendStatus(3)">查看更多>></el-button>
    </div>
    <div class="floor-four">
        <div class="title1">
            <div>DATA SHOW</div>
            <div>课程信息展示</div>
        </div>
        <div class="list">
            <div class="left">
                <img src="@/assets/img/kechengxinxi_tupian1.jpg" alt="">
                <img src="@/assets/img/kechengxinxi_tupian2.jpg" alt="">
            </div>
            <div class="mid1"><img src="@/assets/img/kechengxinxi_tupian3.jpg" alt=""></div>
            <div class="right">
                <img src="@/assets/img/kechengxinxi_tupian4.jpg" alt="">
                <img src="@/assets/img/kechengxinxi_tupian5.jpg" alt="">
            </div>
        </div>
        <el-button type="primary" style="margin-top:10px;margin-left:45%;" @click="sendStatus(4)">查看更多>></el-button>
    </div>
    </template>
    <template v-if="detailStatus==true">
    <img src="@/assets/img/jxgg.png" alt />
    <div class="detail">
      <div class="top">
        <div class="title">
          {{info.title}}
        </div>
        <div class="time">发布时间:{{info.addtime}}</div>
      </div>
      <div class="content" v-html="info.content">
        
      </div>

      <div class="back">
        <el-button type="primary" style="margin-right:10px;" @click="detailStatus = false"> <i class="el-icon-back"></i>返回新闻列表 </el-button>
      </div>
    </div>
   </template>
    
  </div>
</template>

<script>
import {newsList,newsInfo} from '@/api/news'
export default {
  name: "Home",
  data(){
    return {
      status:1,
      newsList:[],
      detailStatus:false,
      info:{}
    }
  },
  methods: {
    sendStatus(e){
      
      this.$emit('getStatus',e)
    },
    async getNewsList() {
      let res = await newsList({
        pagesize: 4,
        pageNumber: 1,
      });
      
      if (res.code == 200) {
        this.newsList = res.data;
        this.newsList.forEach(item => {
            item.addtime = this.dayjs(item.addtime).format("YYYY-MM-DD HH:mm:ss")
            let time = item.addtime
            time = time.split(' ')
            item.time1 = time[0]
            item.time2 = time[1]
            
        });
       
      }
    },
   async toDetail(id){
        console.log(id);
        this.detailStatus = true
        let res =await newsInfo(id)
        if(res.code==200){
        this.info = res.data
        this.info.addtime = this.dayjs( this.info.addtime).format("YYYY-MM-DD HH:mm:ss")
    }
    
  },
},
  mounted() {
   this.getNewsList()
  },
  
  
};
</script>

<style scoped lang="scss">
.container {
  width: 95%;
  height: 100%;
  background-color: rgb(247, 247, 247);
  margin-top: 30px;
  .detail{
  width: 100%;
  box-sizing: border-box;
 .top{
  width: 100%;
  height: 200px;
  padding-top: 50px;
  text-align: center;
 
  border-bottom: 1px solid black;
  .title{
    font-size: 28px;
  }
  .time{
    font-size: 14px;
    margin-top: 100px;
  }
 }
 .content{
  padding: 30px;
  width: 100%;
  
 }
 .back{
  width: 95%;
  margin-left: 2%;
  border-radius: 5px;
  height: 60px;
  background-color: #757e87;
  display: flex;
  align-items: center;
  padding-left: 82%;
  
 }
}
}
.imgWrapper {
  width: 100%;
  height: 150px;
}
.imgWrapper img {
  width: 100%;
  height: 150px;
}
.floor-two {
  margin-top: -4px;
  display: flex;
  justify-content: space-between;
}
.first {
  box-shadow: 4px 4px 15px rgb(136, 116, 116);
  width: 600px;
  height: 250px;
  margin-top: 30px;
  display: flex;
  background-color: #e6e8e7;
  align-items: center;

  img {
    width: 60%;
    height: 230px;
    margin-left: 10px;
  }
}
.content {
  width: 40%;
  height: 100%;
  overflow: hidden;
  margin-left: 5px;

  .mid {
    padding: 0px 10px;
    margin: 10px 0px;
    overflow: hidden;
    text-align: left;
    color: rgb(51, 51, 51);
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 32px;
  }
  .top {
    width: 100%;
    height: 50px;
    background-color: #999d9c;
    text-align: center;
    line-height: 50px;
    font-weight: 500;
    overflow: hidden;
  }
  .foot {
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 30px;
    color: rgb(27, 27, 27);
    text-align: right;
    line-height: 44px;
    font-size: 12px;
    width: 100%;
  }
}
.floor-three {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card {
    width: 400px;
    height: 250px;
    background-color: #e6e8e7;
    box-shadow: 4px 4px 15px rgb(136, 116, 116);
    box-sizing: border-box;
   
    .top1 {
      height: 80px;
      width: 150px;
      margin-top: -30px;
      margin-left: 30px;
      background-color: #999d9c;
      border-radius: 50px 50px 0 0;
      text-align: center;
      line-height: 30px;
      display: flex;
      flex-direction: column;
      line-height: 30px;
      color: rgb(255, 255, 255);
      overflow: hidden;
    }
    .foot1 {
      width: 100%;
      height: 200px;
      overflow: hidden;

      .title {
        text-align: center;
        width: 100%;
        padding: 0 10px;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
      }
      .wb {
        padding: 0px 10px;
    margin: 10px 0px;
    overflow: hidden;
    text-align: left;
    color: rgb(51, 51, 51);
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-height: 32px;
       
      }
    }
  }


}
.floor-four{
  width: 100%;
  height: 800px;
  background-color: #edf6ff;
  box-shadow: 4px 4px 15px rgb(136, 116, 116);
  margin-top: 30px;
 
  .title1{
        width: 100%;
        height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        line-height: 40px;
        
  }
  .list{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-around;
    
    .left{
        width: 200px;
        height: 100%;
       
        display: flex;
        flex-direction: column;
        justify-content: space-between;
       
       
        img{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            box-shadow: 4px 4px 15px rgb(136, 116, 116);
            
        }
    }
    .right{
        
        width: 200px;
        height: 100%;
        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
       
       
        img{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            box-shadow: 4px 4px 15px rgb(136, 116, 116);
            
        }
    }
    .mid1{
        width: 400px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            box-shadow: 4px 4px 15px rgb(136, 116, 116);
            
        }
    }
    
  }

}
</style>